<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--头部固定引用-->
  <meta charset="utf-8">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../css/base.css">
  <!--固定引用结束,自定义引用添加在下面-->
  <title>JT2</title>
  <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
  <style>

      .specialList-header img {
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          left: 0.32rem;
          top: 50%;
          transform: translateY(-50%);
      }
      .specialList-content {
        padding-top: 0.86rem;
      }
      .specialList-content ul {
          list-style: none;
          margin: 0;
          padding: 0;
      }
      .specialList-content ul .contentLi{
          margin: 0 0.32rem 0.24rem;
      }
      .specialList-content ul .contentLi .contentLi-img{
          width: 6.86rem;
          height: 2.4rem;
          /* background:pink; */
          position: relative;
          margin-bottom: 0.3rem;
      }
      .specialList-content ul .contentLi .contentLi-img img{
          width: 6.86rem;
          height: 2.4rem;
      }
      .specialList-content ul .contentLi .contentLi-img span:nth-child(1){
        position: absolute;
        display: block;
        width: 0.72rem;
        height: 0.36rem;
        line-height: 0.36rem;
        left: 0;
        top: 0.2rem;
        background: #C7000B;
        border-radius: 0 100px 100px 0;
        font-family: PingFangSC-Regular;
        font-size: 0.22rem;
        color: #FFFFFF;
        letter-spacing: 0;
        padding-left: 0.1rem;
      }
      .specialList-content ul .contentLi .contentLi-img span:nth-child(2){
        position: absolute;
        bottom: 0.24rem;
        right: 0.24rem;
        width: 0.6rem;
        height: 0.32rem;
        opacity: 0.7;
        background: #000000;
        border-radius: 0.04rem;
        border-radius: 0.04rem;
        font-family: PingFangSC-Regular;
        font-size: 0.22rem;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
      }
      /*  */
      .specialList-header {
    padding:0.22rem 0.32rem;  
    font-family: PingFangSC-Medium;
    font-size: 0.32rem;
    letter-spacing: 0;
    text-align: center;
    /* position: relative; */
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
  }
  .specialList-content ul .contentLi .contentLi-title {
    font-family: PingFangSC-Medium;
    font-size: 0.32rem;
    letter-spacing: 0;
    text-align: left;
    line-height: 0.44rem;
    margin-bottom: 0.26rem;
  }
  .specialList-content ul .contentLi .contentLi-explain{
    font-family: PingFangSC-Regular;
    font-size: 0.26rem;
    letter-spacing: 0;
    text-align: left;
    line-height: 0.4rem;
    margin-bottom: 0.22rem;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 5; 
    overflow: hidden; 
  }
  .specialList-content ul .contentLi .contentLi-count {
    font-family: PingFangSC-Regular;
    font-size: 0.24rem;
    letter-spacing: 0;
    text-align: left;
    line-height: 0.34rem;
    margin-bottom: 0.24rem;
  }
  .specialList-content ul .contentLi .blankLi {
    height: 0.14rem;
}
  </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
  <!--具体代码-->
  <!-- 头部 -->
  <div class="specialList-header">
    <img src="../../images/allPic/jiantou.png" alt="" onclick='closeWindow()' class="headerimg">
    专题列表
  </div>

  <!-- 专题列表 -->
  <div class="specialList-content">
      <ul>
      </ul>
  </div>
</div>
</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let pageNum = 1
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {

    //设置深色模式
    if(configColorType === '1'){
        $('.headerimg').attr('src','../../images/allPic/blackfanhui.png')
    }else{
        $('.headerimg').attr('src','../../images/allPic/jiantou.png')
    }

    $('.specialList-content ul').empty()
    getspecialList(params)
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  function reLoadPage() {

  }
  //获取专题列表
  function getspecialList(params){
    Server.specialInfo.specialList({'pageNum':params.pageNum||pageNum,'pageSize':10}).then(res => {
      console.log(res)
      if(res.code === 0){
        let list = res.list
        list.map((item,index) => {
          let li = 
              `<li class="contentLi" onclick="godetail({'funcCode':'${item.funcCode}'})">
                  <div class="contentLi-img" style="background-image:url(${item.coverImgUrl});background-size:cover;">
                      <span>专题</span>
                      <span>${item.articleCnt}篇</span>
                      <!--  <img src="${item.coverImgUrl}" alt=""> -->
                  </div>
                  <div class="contentLi-title">${item.funcName}</div>
                  <div class="contentLi-explain">${item.introduction?item.introduction:''}</div>
                  <div class="contentLi-count">共${item.articleCnt}篇文章</div>
                </li>
                <li class="blankLi"></li>`

                $('.specialList-content ul').append(li)
        })
      }else{
        // jsBridge.toast('数据异常')
      }
    })
  }
  //点击某一项跳转到专题详情
  function godetail(params){
    // console.log(params)
    jsBridge.openWindow('/html/special/USstocks.html?funcCode='+params.funcCode,{}, {noBar: false})
  }
  //点击返回按钮
  function closeWindow(){
    jsBridge.closeWindows()
  }
  //滑动加载下一页
  document.addEventListener('scroll',function(){
    let top = $('.specialList-content ul').offset().top      
    let height = $('.specialList-content ul').outerHeight(true)
    let maxHeight = document.body.offsetHeight
    let scroll = $(document).scrollTop()
    // console.log(scroll,'scroll')
    // console.log(top,'top')
    // console.log(height,'height')
    // console.log(maxHeight,'maxHeight')
    // console.log(top+height-maxHeight,'top+height-maxHeight')
    if(Math.round(top+height-maxHeight) === Math.round(scroll)){
      pageNum++
      getspecialList({'pageNum':pageNum})
    }
  })
</script>
</html>